<template>
  <common-table
    ref="table"
    :fetch-params="filterParams"
    :fetch="getTableDataAsync"
    :columns="columns"
    :showToolbar="false"
    @vue:mounted="() => $refs.table.load()"
  >
    <template #head_img="{ text, scope }">
      <avatar-card :encryptConfirmed="true" :src="scope.head_img" style="width: 100%" />
    </template>
    <template #action="{ scope }">
      <a-button type="link" @click="details(scope)">详情</a-button>
    </template>
  </common-table>
</template>

<script>
import AvatarCard from '@gis/lib/components/img-viewer/avatar-card.vue';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { openGridTeamPeopleDetails } from './opt.js';
import { handleTableRes } from '@gis/lib/utils/resolver.js';
import { gridTeamList } from '@gis/lib/api';

export default {
  name: 'grid-team-list',
  props: {
    type_code: { type: String },
    activeAreaCode: { type: String },
  },
  components: { AvatarCard },
  data() {
    return {
      columns: [
        {
          title: '头像',
          dataIndex: 'head_img',
          scopedSlots: { customRender: 'head_img' },
          width: 60,
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 70,
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
        },
        {
          title: '所在部门',
          dataIndex: 'department',
        },
        {
          title: '类型',
          dataIndex: 'type_name',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: 70,
          align: 'center',
        },
      ],
    };
  },
  computed: {
    filterParams() {
      return {
        area_code: this.activeAreaCode ? this.activeAreaCode : this.area_code,
        type_code: this.type_code,
      };
    },
  },
  methods: {
    details(data) {
      openGridTeamPeopleDetails(data);
    },
    async getTableDataAsync(params) {
      return await handleTableRes(gridTeamList, params);
    },
  },
  setup() {
    const { area_code } = useUserInfoStore();
    return { area_code };
  },
};
</script>

<style scoped></style>
